import {  Navigate } from "react-router-dom";
import Home from "../views/Home"
//!import About from "../views/About"
import React, { lazy } from "react";  
//?懒加载路由，用lazy，且包裹在React.Suspence中
const About = lazy(() => import("../views/About"))
const User = lazy(() => import("../views/User"))
const Page1 = lazy(() => import("../views/Page1"))
const Page2 = lazy(() => import("../views/Page2"))

const withLoadingCompoent = (comp: JSX.Element) => (
    <React.Suspense fallback={<div>Loading...</div>}>
        {comp}
    </React.Suspense>
)


const routes = [
    {
        path: "/",
        element: <Navigate  to="/page1"/>
    },
    {
        path: "/",
        element: <Home />,
        children: [
            {
                path: "/page1",
                element: withLoadingCompoent(<Page1 />)
            },
            {
                path: "/page2",
                element: withLoadingCompoent(<Page2 />)
            }
        ]
    },
    /* {
        path: "/about",
        element: <React.Suspense fallback={<div>Loading...</div>}>
                    <About/>
                </React.Suspense>
    },
    {
        path: "/user",
        element: <React.Suspense fallback={<div>Loading...</div>}>
                    <User/>
                </React.Suspense>
    } */


   /*  {
        path: "/about",
        element: withLoadingCompoent(<About />)
    },
    {
        path: "/user",
        element: withLoadingCompoent(<User />)
    } */
]

export default routes